
var cssbtn = document.querySelector(".addbox .add");
var searchbtn = document.querySelector(".searchbox .search");
var mask = document.querySelector(".mask");
var content = document.querySelector(".content");
var add = document.querySelector(".mask .add");
var searchinput = document.querySelector(".searchbox input");
var inputs = document.querySelectorAll(".mask input");
var tableBody = document.querySelector(".table-body");
var prev = document.querySelector(".prev");
var next = document.querySelector(".next");
var page = 1;
var maxpage = 0;//保存总页数

// 点击 添加用户 
cssbtn.onclick = ()=>{
    mask.style.display = "block";
}
// 点击 搜索 
searchbtn.onclick = ()=>{
    //向服务器端 发起请求 /api/list , 获取服务端现有的所有用户数据
    axios.get("/api/search",{ params:{searchkey:searchinput.value} }).then((res)=>{
        
        //重新渲染用户列表
        render( res.data.userlist );

        //保存总页数
        maxpage = Math.ceil( res.data.total / 10 );
    })
}
//半透明区域 点击事件
mask.onclick = (e)=>{
    mask.style.display = "none";
    //清除表单输入
    inputs[0].value = '';
    inputs[1].value = '';
    inputs[2].value = '';
}
//白色区域 点击事件
content.onclick = (e)=>{
    e = e || window.event;
    e.stopPropagation();
}
//点击添加按钮 ,执行添加用户功能
add.onclick = ()=>{

    if( add.id ) //如果条件亨利, 说明当前是做 编辑操作
    {
        //向服务器端 发起请求 /api/edit
        axios.get("/api/edit", { params: { id: add.id, email:inputs[0].value,name:inputs[1].value,phone:inputs[2].value   } } ).then((res)=>{
            
            //获取到最新的 服务端 返回的所有用户数据,
            
            //重新渲染用户列表
            render( res.data.userlist );
    
            //隐藏模态框
            mask.style.display = "none";

            //清除id
            add.id = "";

            //清除表单输入
            inputs[0].value = '';
            inputs[1].value = '';
            inputs[2].value = '';
        })
    }
    else{
        //向服务器端 发起请求 /api/add
        axios.get("/api/add", { params: { email:inputs[0].value,name:inputs[1].value,phone:inputs[2].value   } } ).then((res)=>{
            
            //获取到最新的 服务端 返回的所有用户数据,
            console.log('服务端返回的数据',res.data.userlist);
            
            //重新渲染用户列表
            render( res.data.userlist );
    
            //隐藏模态框
            mask.style.display = "none";

            //清除表单输入
            inputs[0].value = '';
            inputs[1].value = '';
            inputs[2].value = '';
        })
    }
}

//封装 渲染用户列表的函数
function render( userlist ){
    var str = userlist.map((item,index)=>{
        return `<ul class="row">
                    <li>${item.email}</li> 
                    <li>${item.name}</li>
                    <li>${item.phone}</li>
                    <li>编辑2</li>
                    <li>是</li>
                    <li>正常</li>
                    <li><span class="iconfont icon-bianji editicon" id="${item._id}" email="${item.email}" name="${item.name}" phone="${item.phone}"></span><span class="iconfont icon-shanchu deleteicon" id="${item._id}"></span></li>
                </ul>`
    }).join("")
    if( userlist.length > 0 ){
        document.querySelector(".table-body").innerHTML = str;
    }else{
        document.querySelector(".table-body").innerHTML = "<div class='empty'>无用户数据!</div>";
    }

}

//向服务器端 发起请求 /api/list , 获取服务端现有的所有用户数据
axios.get("/api/list2",{ params:{page:page} }).then((res)=>{
    
    //重新渲染用户列表
    render( res.data.userlist );

    //保存总页数
    maxpage = Math.ceil( res.data.total / 10 );
})

//给所有用户的公共父标签 添加点击事件
tableBody.onclick = (e)=>{
    e = e || window.event;
    var ele = e.target || e.srcElement;

    if( ele.nodeName == "SPAN" && ele.classList.contains("deleteicon") ){ //点击的是 删除图标
        //向服务器端 发起请求 /api/delete
        axios.get("/api/delete", { params: { id: ele.id } } ).then((res)=>{
            
            //获取到最新的 服务端 返回的所有用户数据,

            //重新渲染用户列表
            render( res.data.userlist );
        })
    }
    else if( ele.nodeName == "SPAN" && ele.classList.contains("editicon") ){ //点击的是 编辑
        //回显数据
        inputs[0].value = ele.getAttribute('email');
        inputs[1].value = ele.getAttribute('name');
        inputs[2].value = ele.getAttribute('phone');
        inputs[3].id = ele.getAttribute('id');
        //显示表单
        mask.style.display = "block";
        
    }
}

//给下一页绑定 点击事件
next.onclick = ()=>{
    //当前页码 小于 最大页码 
    if( page < maxpage ){

        axios.get("/api/list2", { params:{ page:++page } }  ).then((res)=>{
    
            //获取到最新的 服务端 返回的所有用户数据,
            
            //重新渲染用户列表
            render( res.data.userlist );
        })
    }
}